import React, { PureComponent } from 'react'
import Viewer from './viewer'
import Filter from './filter'
import icon from '../../assets/images/icon/position.png';

import { Row, Col } from 'antd';
import { Zoom, PointC, ImgC, Point, Container, MyImg } from './styled'

interface P {
  location?: Array<string>;
  setPoint: Function;
  image: string;
  gap?: number;
}

class MapSelet extends PureComponent<P, any> {
  imgc: any;
  imgi: any;

  constructor(props) {
    super(props);

    this.state = {
      location: this.props.location || [],
      width: 100,
      zoom: 0,
      rotate: 0,
      point: {},
    }
  }

  setPoint(e) {
    const { target, clientX, clientY } = e;
    const rect = target.getBoundingClientRect();
    const { clientWidth, clientHeight } = this.imgc;

    const location = [
      ((clientX - rect.left) / rect.width * 100).toFixed(2),
      ((clientY - rect.top) / rect.height * 100).toFixed(2)
    ];

    this.setState({
      location,
      height: this.imgi.clientHeight,
      point: {
        left: ((clientX - rect.left) / clientWidth * 100).toFixed(5),
        top: ((clientY - rect.top) / clientHeight * 100).toFixed(5),
      }
    }, () => this.props.setPoint(location))
  }

  handleZoom = (v) => {
    const { gap = 5 } = this.props;
    const { width, location, zoom } = this.state;
    const [left, top] = location;
    const z = v * gap;

    this.setState({
      width: width + z,
      height: this.imgi.height / (1 + zoom / 100) * (1 + (z + zoom) / 100),
      zoom: z + zoom,
      point: {
        left: +left + (+left / z / 100) * (1 + (z + zoom) / 100),
        top: +top + (+top / z / 100) * (1 + (z + zoom) / 100),
      }
    });
  }

  getPosition = ({ left, top }, rotate) => {
    let ans = {};

    switch (rotate % 4) {
      case 0: {
        ans = { left, top }
        break;
      }
      case 1: {
        ans = { left: 100 - top, top: left }
        break;
      }
      case 2: {
        ans = { left: 100 - left, top: 100 - top };
        break;
      }
      case 3: {
        ans = { left: top, top: 100 - left }
        break
      }
    }

    return ans
  }

  transform = () => {
    const { rotate } = this.state;
    this.setState({ rotate: rotate + 1 })
  }

  render() {

    const { image } = this.props;
    const { location, width, point, height, rotate } = this.state;

    return (
      <Container>
        <Row style={{ width: "100%", height: "10%" }}>
          <Col span={14}>
            <span
              style={{
                display: 'inline-block', width: '80px',
                height: '30px', lineHeight: '30px',
                textAlign: 'center', verticalAlign: 'text-bottom',
              }}
            >当前坐标</span>
            <span
              style={{
                display: 'inline-block', borderRadius: '3px',
                border: '1px solid #ccc', background: '#f0f0f0',
                width: '200px', height: '30px', lineHeight: '30px',
                textIndent: '14px', verticalAlign: 'text-bottom',
              }}
            >
              {Array.isArray(location) && location.join(', ')}
            </span>
          </Col>
          <Col span={10}>
            <Row type="flex" justify="end">
              <Zoom type="zoom-in" onClick={this.handleZoom.bind(this, 1)} />
              <Zoom type="zoom-out" onClick={this.handleZoom.bind(this, -1)} />
              <Zoom type="sync" onClick={this.transform} />
            </Row>
          </Col>
        </Row>
        <ImgC>
          <PointC height={height} width={width} onClick={e => this.setPoint(e)} ref={ref => this.imgc = ref}>
            {JSON.stringify(point) !== "{}" && <Point
              src={icon}
              {...this.getPosition(point, rotate)}
            />}
          </PointC>
          {
            image && <MyImg
              src={image}
              alt="展示图片"
              width={width}
              rotate={rotate * 90}
              ref={ref => this.imgi = ref}
              onLoad={e => this.setState({
                height: e.target.height,
                point: !!location ? {
                  left: location[0],
                  top: location[1],
                } : {}
              })}
            />
          }
        </ImgC>
      </Container>
    )
  }
}


export default MapSelet;
export {
  Viewer,
  Filter
}
/**
 * 坐标为相对图片位置的百分比
 */